<template>
    <div class="app-content">
        <div class="article" v-for="(item, index) in test" key="index">
            <p class="title"><a :href="'/#/detail/'+item.id">{{ item.title }}</a></p>
            <span class="datetime">{{ item.datetime }}</span>
            <span class="view"><img src="../assets/eye88.png" style="width: 15px;margin-bottom: -2px;margin-right: 5px"/>{{ item.view }}</span>
        </div>
    </div>
</template>

<script>
  export default {
    data () {
      return {
        test: []
      }
    },
    beforeRouteUpdate (to, from, next) {
      console.log(to.params.id)
      let id = to.params.id
      this.getData(id)
      next()
    },
    mounted () {
      let id = this.$route.params.id
      this.getData(id)
    },
    methods: {
      getData (id) {
        if (id) {
          let that = this
          that.$http({
            url: '/api/article',
            method: 'get',
            params: {
              id
            }
          }).then(function (data) {
            console.log(data)
            that.test = data.data.data
          })
        }
      }
    }
  }
</script>

<style>
    .router-link-exact-active {
        font-size: 30px;
        color: rosybrown;
    }
</style>